<template>
	<view :class="[config.style]">
		<!-- 自定义表单弹出框 -->
		<uni-popup ref="CustomFormPopup" type="bottom">
			<view class="custom-form">
				<view class="form-content">
					<view class="form-title">
						<view class="title">{{formData.title}}</view>
						<view class="form-tip">下单前请完善以下信息</view>
					</view>
					<form @submit="formSubmit" @reset="formReset">
						<view class="form-group" v-for="(item,index) in formContent" :key="index">
							
							<view class="uni-form-item uni-column" v-if="item.type == 'text'">
								<view class="title">{{item.title}}</view>
								<view class="el textarea-sec">
									<input class="uni-input input" :name="item.title" placeholder-style="color:#999999;font-size:28rpx;" :placeholder="item.placeholder" />
								</view>
							</view>
							
							<view class="uni-form-item uni-column" v-if="item.type == 'textarea'">
								<view class="title">{{item.title}}</view>
								<view class="el textarea-sec">
									<textarea class="textarea" :name="item.title" placeholder-style="color:#999999;font-size:28rpx;" :placeholder="item.placeholder"/>
								</view>
							</view>
							
							<view class="uni-form-item uni-column" v-if="item.type == 'radio'">
								<view class="title">{{item.title}}</view>
								<view class="el">
									<radio-group class="radio-sec" :name="item.title">
										<label class="radio" v-for="(c,i) in item.options" :key="i" >
											<radio :value="c" :checked="i==0?true:false" :color="util.setStyleColor(microConfig.style)" /> {{c}}
										</label>
									</radio-group>
								</view>
							</view>
							
							<view class="uni-form-item uni-column" v-if="item.type == 'checkbox'">
								<view class="title">{{item.title}}</view>
								<view class="el">
									<checkbox-group class="checkbox-sec" :name="item.title">
										<label class="checkbox" v-for="(c,i) in item.options" :key="i" >
											<checkbox :value="c" :checked="i==0?true:false" :color="util.setStyleColor(microConfig.style)" /> {{c}}
										</label>
									</checkbox-group>
								</view>
							</view>
							
							<view class="uni-form-item uni-column" v-if="item.type == 'datetime'">
								<view class="title">{{item.title}}</view>
								<view class="el datetime-sec">
									<input class="uni-input datetime-input" :name="item.title" v-model="datetime" />
									<uni-datetime-picker
										type="datetime"
										:value="datetime"
										:name="item.title"
										@change="changeDatetime"
									/>
								</view>
							</view>
						</view>
						<view class="form-submit">
							<button type="default" form-type="submit" class="btn-submit">{{formData.btn_text}}</button>
						</view>
					</form>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			config: {
				type: Object,
				default: {},
			},
			formId: {
				type: Number,
				default: 0,
			},
			infoType: {
				type: String,
				default: '',
			},
			infoId: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				formTitle: '',
				formData: [],
				formContent: [],
				datetime: '', // 日期时间
				needSubmitForm : false
			}
		},
		created() {
			console.log('关联自定义表单项')
			this.getCustomFormData()
		},
		methods: {
			
			/**
			 * 获取自定义表单数据
			 * @param {Object} id
			 */
			getCustomFormData() {
				let that = this
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/form'
					//#endif
					//#ifdef H5
					url = 'entry/site/form'
					//#endif
				let data = {}
				data.action = 'detail'
				data.id = this.formId
				return that.util.request({
					url: url,
					method: 'get',
					data: data,
					success: (res)=>{
						//console.log(res)
						if(res.data.code == 200){
							that.formData = res.data.data
							that.formTitle = res.data.data.title
							that.formContent = res.data.data.content
						}
						that.getHasCustomFormData()
					}
				})
			},
			
			/**
			 * 查询用户是否已填写表单数据
			 */
			getHasCustomFormData() {
				let that = this
				// 仅有表单数据时执行
				if(this.formContent.length == 0){
					// 默认返回无需执行
					that.needSubmitForm = false
					return false
				}
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/form'
					//#endif
					//#ifdef H5
					url = 'entry/site/form'
					//#endif
				
				let data = {}
				data.action = 'check'
				data.form_id = this.formId
				data.info_type = this.infoType
				data.info_id = this.infoId
				return that.util.request({
					url: url,
					method: 'get',
					data: data,
					success: (res)=>{
						if(res.data.code == 200){
							// 存在数据跳过
							that.needSubmitForm = false
						}else{
							that.needSubmitForm = true
						}
					}
				})
			},

			/**
			 * 展开自定义表单弹框
			 */
			openPopup(){
				this.$refs.CustomFormPopup.open()
			},
			
			/**
			 * 提交数据
			 */
			formSubmit(e){
				let that = this
				// 表单提交
				let formData = e.detail.value
					formData = JSON.stringify(formData)
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/form'
					//#endif
					//#ifdef H5
					url = 'entry/site/form'
					//#endif
				// 提交至服务端
				this.util.request({
				    url: url,
					method: 'post',
					data: {
						action: 'add',
						form_id: that.formId,
						form_data: formData,
						info_type: that.infoType,
						info_id: that.infoId,
					},
					success: function(res){
						if (res.data.code == 200) {
							// 无需填写表单
							that.needSubmitForm = false
							// 弹出提示消息
							uni.showModal({
								title: '提示',
								content: '提交成功！',
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										that.$refs.CustomFormPopup.close()
									}
								}
							});
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon:'none'
							});
						}
					}
				})
			},
			
			formReset() {
				
			},
			
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change: function(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			
			changeDatetime(e) {
				this.datetime = e;
				console.log("-change事件:", e);
			},
		}
	}
</script>

<style lang="scss">
	.custom-form {
		margin: 0;
		.form-content {
			padding: 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			.form-title {
				text-align: center;
				margin-bottom: 40rpx;
				.title {
					font-size: 36rpx;
					font-weight: 600;
					line-height: 64rpx;
				}
				.form-tip {
					color: #999;
					font-size: 28rpx;
					line-height: 48rpx;
					font-weight: 400;
				}
			}
			.form-group {
				margin: 20rpx auto;
				.uni-form-item {
					display: flex;
					.title {
						width: 120rpx;
						text-align: center;
						line-height: 64rpx;
						font-size: 29rpx;
					}
					.el {
						flex: 1;
						padding-left: 10rpx;
						.input {
							border: 1px solid #ddd;
							padding: 10rpx;
							border-radius: 10rpx;
						}
						.textarea {
							border: 1px solid #ddd;
							padding: 10rpx;
							border-radius: 10rpx;
							height: 160rpx;
							width: auto;
						}
						.datetime-input {
							display: none;
						}
					}
					.radio-sec {
						display: flex;
						.radio {
							width: 50%;
							padding: 10rpx 0;
						}
					}
					.checkbox-sec {
						display: flex;
						.checkbox {
							padding: 10rpx 0;
							width: 50%;
						}
					}
				}
			}
			
			.form-submit {
				margin-top: 40rpx;
				.btn-submit{
					color: #fff;
					border-radius: 20rpx;
					&::after {
						border: 0;
					}
				}
			}
		}
	}
	
	.Blue {
		.form-submit {
			button {
				background-color: $Blue;
			}
			.hover-button {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {
		.form-submit {
			button {
				background-color: $Green;
			}
			.hover-button {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {
		.form-submit {
			button {
				background-color: $LightRed;
			}
			.hover-button {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {
		.form-submit {
			button {
				background-color: $Orange;
			}
			.hover-button {
				background-color: $Orange-hover;
			}
		}
	}
	.LightRed {
		.form-submit {
			button {
				background-color: $LightPink;
			}
			.hover-button {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {
		.form-submit {
			button {
				background-color: $Magenta;
			}
			.hover-button {
				background-color: $Magenta-hover;
			}
		}
	}
</style>
